<template>
  <div class='operation-wrapper'>
    <div class="list controls-list">
      <!-- <custom-title title="操作列表"/> -->
      <base-table :tableModel="operateList" :tableItemConfig="operateListConfig" stripe v-loading="operateLoading" height="650px">
        <template v-slot:operateType="{ scope, item }">
          <dict-tag :options="dict.type.operate_type" :value="scope.row[item.prop]" />
        </template>
        <template v-slot:operateStatus="{ scope, item }">
          <dict-tag :options="dict.type.operate_status" :value="scope.row[item.prop]" />
        </template>
      </base-table>
      <!-- 分页 -->
      <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" small @change="getList"></Pagination>
      <!-- 分页over -->
    </div>
  </div>
</template>

<script>
import { listDeviceAlarmOperateRecord } from '@/api'
export default {
  name: "OperationRecord",
  dicts: ['operate_type', 'operate_status'],
  props: {
    value: {
      require: true
    }
  },
  data() {
    return {
      searchMap: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 操作列表
      operateList: [],
      operateListConfig: [
        {
          prop: 'operateType',
          label: '操作类型',
          slotName: 'operateType'
        },
        {
          prop: 'createTime',
          label: '操作时间'
        },
        {
          prop: 'operateContent',
          label: '操作内容'
        },
        {
          prop: 'operateName',
          label: '操作人员'
        },
        {
          prop: 'operateStatus',
          label: '操作状态',
          slotName: 'operateStatus'
        }
      ],
      operateLoading: false
    };
  },
  computed: {},
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.searchMap.deviceId = newVal.deviceId
        this.getList(newVal)
      },
    }
  },
  methods: {
    async getList() {
      this.operateLoading = true
      const res = await listDeviceAlarmOperateRecord(this.searchMap)
      if (res && 200 == res.code) {
        this.operateList = res.rows
        this.total = res.total
      }
      this.operateLoading = false
    },

  },
  components: {},
}
</script>